<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>轨迹回放</title>
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<link rel="stylesheet" href="./style.css" />
		<style>
			html,
			body,
			#container {
				height: 100%;
				width: 100%;
			}

			.input-card .btn {
				margin-right: 1.2rem;
				width: 9rem;
			}

			.input-card .btn:last-child {
				margin-right: 0;
			}

			/* tab切换  */
			.parentBox {
				width: 100%;
				height: 50%;
				/* margin: 4rem 0 0 0; */
				position: relative;
			}

			.parentBox .btnInfor {
				font-size: 1.5rem;
				display: inline-block;
				padding: 1rem 2.5rem;
				position: absolute;
				right: 0;
				bottom: 1.2rem;
				border-radius: 2.8rem 0 0 2.8rem;
				color: white;
				background: #0f80ff;

			}

			.trackfor {
				font-size: 1.5rem;
				display: inline-block;
				padding: 1rem 2.5rem;
				position: absolute;
				right: 0;
				bottom: 6.5rem;
				border-radius: 2.8rem 0 0 2.8rem;
				color: white;
				background: #0f80ff;
			}

			.seach {
				font-size: 1.5rem;
				display: inline-block;
				padding: 1rem 2.5rem;
				position: absolute;
				right: 0;
				bottom: 12rem;
				border-radius: 2.8rem 0 0 2.8rem;
				color: white;
				background: #0f80ff;
			}

			.details {
				width: 100%;
				/* position: absolute; */
				display: inline-block;
				/* left: 0;
				top: 0 */
				background: white;
				margin: 4rem 0 0 0;
			}

			.map_box {
				width: 100%;
				height: 100%;
				position: relative;
			}

			.details_left {
				width: 49%;
				display: inline-block;
				font-size: 1rem;
			}

			.details_left_txt {
				width: 100%;
				display: inline-block;
				margin: 5px 0;
				padding: 0 0 0 1rem;
			}

			.details_right_txt {
				width: 100%;
				display: inline-block;
				margin: 5px 0;
			}

			/* 轨迹 */
			.track {
				width: 80%;
				height: 16rem;
				margin: 0 auto;
				display: inline-block;
				background: #fff;
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				margin: auto;
				box-shadow: 4px 4px 4px rgba(0, 0, 0, .3);
			}

			.track {
				display: none;
			}


			.track-mid {
				height: 4rem;
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin: 1rem 0 0 0;
			}

			.track-mid_text {
				/* width: 33%; */
				text-align: center;
				display: inline-block;
			}

			.track-mid_text_first {
				display: block;
				/* margin: 30px 0 15px 0; */
			}

			.track-top {
				height: 4rem;
				background-color: #dbe6fe;
				padding: 0 0 0 20px;
				display: flex;
				align-items: center;
				text-align: center;
			}

			.button {
				margin: 10px 40px;
				display: flex;
				justify-content: space-between;
				
			}

			.track-top span {
				width: 70%;
				line-height: 50px;
				margin: 0 40px 0 0;
				text-align: left;
			}

			.track-top img {
				margin: 0 auto;
			}

			/* 	.pause{
				display: none;
			} */
		</style>
	</head>
	<body>
		<!--uni SDK 一定要引入 -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<script type="text/javascript"
			src="https://webapi.amap.com/maps?v=1.4.15&key=341fd8553c4916d280b8c43af794d60b&plugin=AMap.GraspRoad">
		</script>
		<div class="parentBox">
			<div class="details">
				<div class="details_left">
					<span class="details_left_txt">车牌号(颜色)：</span>
					<span class="details_left_txt">营运状恋：</span>
					<span class="details_left_txt">经营范围：</span>
					<span class="details_left_txt">道路运输证号：</span>
					<span class="details_left_txt">有效期至：</span>
					<span class="details_left_txt">下次年审日期：</span>
					<span class="details_left_txt">承运人责任险有效期：</span>
					<span class="details_left_txt">所属企业：</span>
					<!-- 		<span class="details_left_txt">轨迹开始时间：</span>
					<span class="details_left_txt">轨迹结束时间：</span> -->
				</div>
				<div class="details_left">
					<span class="details_right_txt"></span>
					<span class="details_right_txt"></span>
					<span class="details_right_txt"></span>
					<span class="details_right_txt"></span>
					<span class="details_right_txt"></span>
					<span class="details_right_txt"></span>
					<span class="details_right_txt"></span>
					<span class="details_right_txt"></span>
					<!-- <span class="details_right_txt"></span>
					<span class="details_right_txt"></span> -->
				</div>
			</div>
			<!-- 地图 -->
			<div class="map_box">
				<div id="container"></div>
				<div class="btnInfor" onclick='waybillInfor()'>运单信息</div>
				<div class="trackfor" onclick='trackInfor()'>轨迹回放</div>
				<div class="seach" onclick='seach()'>信息查询</div>
			</div>
			<div class="track track1">
				<div class="track-top">
					<span class="track-top_time">
					</span>
					<img src="../../../static/img/close.png" onclick="closeClack()" alt="">
				</div>
				<div class="track-mid">
					<div class="track-mid_text">
						<span class="track-mid_text_first">
							<!-- {{ popUp.longitude }} -->
						</span>
						<span>
							经度
						</span>
					</div>
					<div class="track-mid_text">
						<span class="track-mid_text_first">
							<!-- {{ popUp.latitude }} -->
						</span>
						<span>
							纬度
						</span>
					</div>
					<div class="track-mid_text">
						<span class="track-mid_text_first">
							<!-- {{ popUp.speed }}KM/h -->

						</span>
						<span>
							速度
						</span>
					</div>
				</div>
				<div style="width: 100%;display: inline-block;">
					<div class="slider-box">
						<div class="slider-bg">
							<div class="slider-color"></div>
						</div>
						<div class="slider-wrapper"></div>
					</div>
				</div>
				<div class="button">
					<div style="margin: 8px 0 0 0 ;">起点</div>
					<div>
						<!-- 后退 -->
						<img src="../../../static/img/left.png" onclick="clickSpeed(1)" alt="" width="25px"
							height="25px" />
						<span onclick="navgControl('resume')" class="resume">
							<img src="../../../static/img/play.png" style="margin:0 10px;" alt="" />
						</span>
						<span onclick="navgControl('pause')">
							<img src="../../../static/img/pause.png" alt="" style="margin:0 10px;display: none;"
								class="pause" />
						</span>
						<!-- 前进 -->
						<img src="../../../static/img/right.png" alt="" onclick="clickSpeed(2)" width="25px"
							height="25px" />

					</div>
					<div class="map-times">
						<div class="times-show">倍速
							<span id="times-num">
								1
							</span>
						</div>
					</div>
					<div style="margin: 8px 0 0 0 ;">终点</div>
				</div>
			</div>
			<!-- <div class="input-card">
				<h4>轨迹回放控制</h4>
				<div class="input-item">
					<input type="button" class="btn" value="开始回放" id="start" onclick="startAnimation()" />
					<input type="button" class="btn" value="暂停回放" id="pause" onclick="pauseAnimation()" />
				</div>
				<div class="input-item">
					<input type="button" class="btn" value="继续回放" id="resume" onclick="resumeAnimation()" />
					<input type="button" class="btn" value="停止回放" id="stop" onclick="stopAnimation()" />
				</div>
			</div> -->
		</div>
	</body>
	<script type="text/javascript" src="script.js"></script>
	<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
</html>
